<template>
    <div>
        <Title @parentexcel="exportExcl"></Title>
        <Search @searchfun="searchfun"></Search>
        <Calc></Calc>
        <div class="fromlist">
            <From :list="list"></From>
        </div>
        <Crrent></Crrent>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import Title from './components/Title.vue'
import Search from './components/Search.vue'
import From from './components/From.vue'
import Calc from './components/Calc.vue'
import Crrent from './components/Crrent.vue'
import { tongjiget } from '../../api/Tongj'//引入接口api写的方法
// @ts-ignore 忽略ts检查
import json2Excel from "../../utils/json2Excel";
export default defineComponent({
    components: {
        Title,
        Search,
        From,
        Calc,
        Crrent
    },
    
    setup() {
        const state = reactive({
            params: {
                tags: '',//搜索关键词
                page: 1,//当前页
                pageSize: 10//一页显示多少条数据  默认给了个10
            },
            list: []//保存list列表数据
        })
        // 父组件的搜索
        const searchfun = (val: string) => {
            // @ts-ignore
            state.params.tags = val
            getTongj()
        }
        const getTongj = () => {
            tongjiget(state.params).then(res => {
                console.log('res', res);
                if (res.code == 200) {//数据保存
                    state.list = res.data
                }
            })
        }
        // 导出excel
        //导出excel
        const exportExcl = () => {
            //@ts-ignore
            const excelKeyToName: excelKeyToNameType = {
                key: 'key',
                id: '序号',
                zt: '订单状态',
                type: '订单状态',
                address: '订单编号',
                tags: '姓名',
                action: '科室',
                doctor: '接诊医生',
                youhui: '优惠(元)',
                yingshou: '应收 / 退(元)',
                shishou: '实收 / 退(元)',
                yibao: '医保(元)',
                huiyuan: '会员卡',
                xianj: '现金(元)',
                zhifub: '支付宝(元)',
                wx: '微信(元)',
                yhk: '银行卡(元)',
                sfrq: '收费日期',
                sfy: '收费员',
                caozuo: '操作',
            }
            //@ts-ignore
            const state = data.arr.map((item) => {
                const newItem: any = {};
                Object.keys(item).forEach(key => {
                    newItem[excelKeyToName[key]] = item[key];
                });
                return newItem;
            });
            // 导出 Excel
            json2Excel(state);
        }
        // 普屏
        onMounted(() => {
            getTongj()
        })

        return { ...toRefs(state), searchfun, getTongj, exportExcl }
    }
})
</script>

<style scoped>
.fromlist {
    overflow: scroll;
}
</style>